<template>
  <div class="collect_item" >
    <div class="img" @click="goDetail(id)">
      <img :src="image" alt="" />
    </div>
    <div class="info">
      <div class="store_name">{{store_name}}</div>
      <div class="info_dd">
        <div class="price">￥{{price}}</div>
        <div class="delete" @click="deleteItem">删除</div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: "Collect",
  props: {
    id: {
      type: [Number,String],
    },
   
    image: {
      type: String,
    },
    price: {
      type: String,
    },
    
    store_name: {
      type: String,
    },
    
  },
  methods:{
   
    goDetail(id){
      this.$router.push('/detail/'+id)
    },
    deleteItem(){
      let url = "/api/collect/del";
      let token = localStorage.getItem('token')
      let data = {
        id: this.id,
        category: "product"
      };
      let pro = axios({
        method: "post",
        url:url,
        data: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          // let { status , data} = res.data
          // if(status == 200){
          //   this.List = data
          // }
          this.$toast.show("删除成功",1500)
          // location.reload();
          this.$emit('del-item',{id:this.id})
        })
        .catch((err) => {
          console.log("用户收藏数据回去失败");
        });
    }
    
  }
};
</script>

<style lang="scss" scoped>
.collect_item {
  width: 100%;
  // height: 100px;
  // background-color: blue;
  background-color: #fff;
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  .img {
    width: 63px;
    height: 63px;
    overflow: hidden;
    border-radius: 12px;
    margin-right:13px ;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    width: 280px;
    flex-shrink: 0;
    display: flex;
  
    // padding-right: 15px;
    flex-direction: column;
    justify-content: space-between;

    .store_name {
      width: 100%;
      color: #282828;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .info_dd {
      height: 22px;
      display: flex;

      justify-content: space-between;

      .price {
        height: 22px;
        line-height: 22px;
        color: #fc4141;
        font-size: 12px;
      }
      .delete {
        height: 100%;
        width: 40px;
        line-height: 22px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 12px;
        color: #282828;
      }
    }
  }
}
</style>

